﻿<!DOCTYPE html>
<html>
<head>

   <meta http-equiv="X-UA-Compatible" content="IE=8;text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>示范程序</title>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <link href='./css/sm-extend.css' rel='stylesheet' />
    <link href='./css/sm-doc.css' rel='stylesheet' />


</head>
   <body data-spy="scroll" data-target=".subnav" data-offset="50">
         <!--功能区-->
         <div id='container' class='container'>

               <div class='page-header'>
                    <h3>范例分类</h3>

                    <ul class="nav nav-tabs" id='myTab'>
                       <li  class='active'><a href="#base" data-toggle="tab">加载地图</a></li>
                      <li><a href="#vector" data-toggle="tab">图层</a></li>
                      <li><a href="#control" data-toggle="tab">控件</a></li>
                    
                   </ul>

                   <div class='tab-content' id='myTabContent'>
       
                       <div class='tab-pane fade' id='vector'>
                           <div class="container-fluid">
                               <div class="row-fluid">
                                   <div class="span2">
                                       <ul class='nav nav-pills'><span ></span><li>矢量图层</li>
                                       </ul>
                                   </div>
                                   <div class="span10">
                                       <ul class='nav nav-pills'>
										   <li><a href='javascript:void(0)' target='_self' id='drawLayer'>添加矢量图层</a></li>
                                           <li><a href='javascript:void(0)' target='_self' id='layerControl'>图层控制</a></li>
                                       </ul>
                                   </div>
                               </div>
                           </div>

                           <div class="container-fluid">
                               <div class="row-fluid">
                                   <div class="span2">
                                       <ul class='nav nav-pills'><span ></span><li>标记图层</li>
                                       </ul>
                                   </div>
                                   <div class="span10">
                                       <ul class='nav nav-pills'>
                                           <li><a href='javascript:void(0)' target='_self' id='addMarkerLayer'>添加图标图层</a></li>
										   <li><a href='javascript:void(0)' target='_self' id='addTextLayer'>添加文本图层</a></li>
										   <li><a href='javascript:void(0)' target='_self' id='addComplexLayer'>添加复合图层</a></li>
                                       </ul>
                                   </div>
                               </div>
                           </div>
                       </div>

                       <div class='tab-pane fade' id='control'>
                               <div class="container-fluid">
                                        <div class="row-fluid">
                                                <div class="span2">
                                                       <ul class='nav nav-pills'><span ></span><li>地图类控件</li>
                                                       </ul>
                                                </div>
                                                <div class="span10">
                                                      <ul class='nav nav-pills'>
                                                          <li><a href='javascript:void(0)' target='_self' id='measure'>测量</a></li>
                                                          <li><a href='javascript:void(0)' target='_self' id='editMarkerLayer'>编辑图标图层</a></li>
														  <li><a href='javascript:void(0)' target='_self' id='editShapeLayer'>编辑线面图层</a></li>
														  <li><a href='javascript:void(0)' target='_self' id='EditGraphicsModule'>点线面绘制</a></li>
														  <li><a href='javascript:void(0)' target='_self' id='addInfoWindow'>添加弹出窗口</a></li>
                                                      </ul>
                                                </div>
                                        </div>
                               </div>

                       </div>

                      <div class='tab-pane fade active in' id='base'>
                           <div class="container-fluid">
                               <div class="row-fluid">
                                   <div class="span2">
                                       <ul class='nav nav-pills'><span ></span><li>基本功能</li></ul>
                                   </div>
                                   <div class="span10">
                                       <ul class='nav nav-pills'>
										<li><a href='javascript:void(0)' target='_self' id='centerTo'>定位到某个位置</a></li>
                                        <li><a href='javascript:void(0)' target='_self' id='showCenter'>展示地图中心点</a></li>
                                       </ul>
                                   </div>
                               </div>
                           </div>
                       </div>







                  </div>
              </div>

              <div class='page-header'>

                  <h3><span id='demo-title'></span></h3>
                 <span id="skip" href='#' onclick="window .open(this.href);" style ="cursor: pointer">跳转</span>
                 <span> <a id='sourceCode' href='#' target='_self'>显示源码</a></span>

                  <div id='func'></div>
                      <div id='map'>
                               <iframe id="examplesIframe" height="560px" frameBorder="0" marginheight="0" marginwidth="0" width="100%"></iframe>
                     </div>
                    <div id='result' class='container'></div>
                    <div id='mousePositionDiv' class='smCustomControlMousePosition'></div>
             </div>


             <div class='page-header'>
                   <h3>描述</h3>
                   <p id='desc'>
                       对本案例的描述
                   </p>
                   <h3>操作说明</h3>
                   <p id='oper'>
                       详细的操作说明
                   </p>
            </div>
             <div class='footer'>
                    <p>版权所有&nbsp;&copy; 2000-2015. &nbsp;</p>
             </div>
        </div>
         <!--第三方的操作样式库-->
         <script src='./jslibs/jquery.js'></script>
         <script src='./jslibs/bootstrap.js'></script>
         <!--引入范例使用URL，描述等信息-->
         <script src='./jslibs/description.js'></script>
         <script>
             var loadedScript, dataCount = 0;
             $(document).ready(function() {
                 var demoID = 'LoadMap';
                 $('#skip').prop('href', './' + demoID + '.html');
                 var url = './' + demoID + '.html';
                 attachScript(url, demoID + "_script");
                 var sourceEle = $('#sourceCode');
                 sourceEle.prop('url', url);
                 sourceEle.click(function() {
                     openSource(sourceEle);
                 });
				
                 attachDetails(demoID);


                 //添加单击事件
                 $('#myTabContent').click(function(e) {
                     e = e || window.event;
                     addFunc(e);
                     //阻止浏览器冒泡
                     if(typeof e.preventDefault === 'function') {
                         e.preventDefault();
                         e.stopPropagation();
                     } else {
                         e.returnValue = false;
                         e.cancleBubble = true;
                     }
                 });

             });


             //加载具体的案例。
             function addFunc(e) {
			 
                 var srcEle = e.target || e.srcElement;
                 if (srcEle && srcEle.nodeName === 'A') {
                     activeExample(srcEle);
                 }
             }
             function activeExample(srcEle) {
                 updateClassName(srcEle);
                 $('#sourceCode').prop('url', './' + srcEle.id + '.html');
                 $('#skip').prop('href', './' + srcEle.id + '.html');
                 runExample(srcEle);
             }
             function updateClassName(ele) {
                 /*需要更精确的定位*/
                 $('.tab-content').find('> .tab-pane  ul > .active').removeClass('active');
                 $(ele).parent().addClass('active');
             }

             function attachScript(url, id) {
                 $("#examplesIframe").attr("src",url);
             }
             function attachDetails(name) {
                 var details = DemoDescription[name];
                 if(!details.title){
                     details.title = "案例名称";
                 }
                 if(!details.desc){
                     details.desc = "对本案例的描述";
                 }
                 if(!details.oper){
                     details.oper = "详细的操作说明";
                 }
                 $('h3 #demo-title').text(details.title);
                 $('#desc').text(details.desc);
                 $('#oper').text(details.oper);
             }
             function runExample(srcEle) {
                 var url= './'+ srcEle.id+ '.html';
                 attachScript(url, srcEle.id + "_script");
                 attachDetails(srcEle.id);
             }


             //查看源码
             function openSource(ele) {
                 var href = window.location.href;

                 var sourceUrl = href.substr(0, href.lastIndexOf('/')+1) +  ele.prop('url');
                 var broz = $.browser;
                 var isFile = document.location.toString().match(/file:\/\//);
                 var isChrome = navigator.userAgent.toLowerCase().match(/chrome/) != null;
                 if (broz.mozilla) {
                     showSourceForFirefox(sourceUrl);
                 }
                 else if(isChrome){
                     if(isFile){
                         showSourceForchrome_file(sourceUrl);
                     }
                     else{
                         showSourceForIE_Safari_chrome(sourceUrl);
                     }
                 }
                 else if (broz.safari||broz.msie) {
                     showSourceForIE_Safari_chrome(sourceUrl);
                 }
                 else {
                     alert("暂不支持此浏览器显示源码！请在下方地图区域点击右键——>查看源文件");
                 }

             }
             //fireFox
             function showSourceForFirefox(url) {
                 window.open("view-source:" + url, "sourceInFirefox",'scrollbars=yes,toolbar=no,menubar=no,location=no,status=no');       //, 'toolbar=no,menubar=no,location=no,status=no'
             }
             //chrome file
             function showSourceForchrome_file(url) {
                 window.open("view-source:" + url, "sourceInFirefox",'scrollbars=yes,toolbar=no,menubar=no,location=no,status=no');       //, 'toolbar=no,menubar=no,location=no,status=no'
             }
             //IE、chrome与Safari显示源代码方法
             function showSourceForIE_Safari_chrome(url) {
                 //, "sourceInIE", 'toolbar=no,menubar=no,location=no,status=no'
                 var html = $.ajax({ url: url, async: false }).responseText; //获取网页文本内容
                 if(html&&html!=""){
                     var newIEPage = window.open("","showSourceForIE_Safari_chrome",'scrollbars=yes,toolbar=no,menubar=no,location=no,status=no');//,"showSourceForIE_Safari_chrome",'scrollbars=yes,toolbar=no,menubar=no,location=no,status=no'
                     newIEPage.document.write("<body></body>");
                     newIEPage.document.body.innerText = html;
                 }
                 else{
                     alert("暂不支持此浏览器显示源码！请在下方地图区域点击右键——>查看源文件");
                 }
             }
         </script>


   <script>
       $('.tab-pane').find('>div>div:last').css("border-bottom","0px");
       $('.row-fluid').find('>div ul>li a:last').css("border-right","0px");
   </script>
  </body>
</html>
